<HTML>
<HEAD>
<TITLE>Bakar</TITLE>

<script  LANGUAGE="JavaScript" src="js/dateFormat.js"></script>
<script LANGUAGE="JavaScript" src="dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script LANGUAGE="JavaScript" src="js/bakarUtils.js"></script>
<script  LANGUAGE="JavaScript" src="js/bakarAjax.js"></script>
<script  LANGUAGE="JavaScript" src="js/manageGroups.js"></script>

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/css3buttons.css" type="text/css"	media="screen,projection,print" />
<link rel="stylesheet" type="text/css"	href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css"	href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css" />

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@page import="com.google.appengine.api.users.*,com.bakar.util.*"%>
<%--@ page import="com.google.appengine.api.blobstore.BlobstoreService"--%>

<script type="text/javascript" src="js/bakarUtils.js"></script>
<script type="text/javascript" src="js/dateFormat.js"></script>
<script src="dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript" src="js/bakarAjax.js"></script>


<SCRIPT LANGUAGE="JavaScript">
	<%UserService googleUserService = UserServiceFactory.getUserService();
	User user = googleUserService.getCurrentUser();%> 
	
	var enableAutoRefresh = true;
	var onlineUserTimeout = 30000;
	var messageRefreshTimeout = 5000;
	var messageRefreshTimeoutMinThresold = 5000;
	var messageRefreshTimeoutMaxThresold = 60000;
	var userAwayTimeout = (15*60*1000);
	var sessionTimeout = (60*60*1000);
	var localuser = '${currentUser}'//'<%--BakarUtils.getLoginId(user)--%>';
	var localUserImagePath = '${currentUserImage}'
	var localuserdisplayname = 	'${localuserdisplayname}'
	var currentOnlineUsers
	var groupUsers = new Array()	
	var selectedLoginId
	var isReceiveMessagesCalled = false
	var unreadMessagesUserids = new Array();
	var msgAddedToExisting = new Array()
	var messageIds = new Object();
	var logoutURL = '<%=googleUserService.createLogoutURL("/")%>'
	var defaultInvitationMessage = 'Hi Friend, \nI would like you to join Bakar \nCheers \n${currentUser}'
	

	// Timers
	var titlechageTimeoutId;
	var onlineUserTimeoutId;
	var messageReceiveTimoutId;
	var userAwayTimeoutId;
	var userSessionExpireTimeoutId;

	function displayChat(userid) {

		var individualChat = document.getElementsByTagName('div')
		for ( var i_tem = 0; i_tem < individualChat.length; i_tem++)
			if (individualChat[i_tem].className == 'individualChat') {
				individualChat[i_tem].style.display = 'none';
			}
		document.getElementById(userid + '_chatarea').style.display = 'block';
		document.getElementById(userid + "_link").bgColor = 'White'
		document.getElementById(userid + "_chatcurrent").focus()
		changeOnlineUsersBackgroundDisplayChat(userid)
		removeByElement(unreadMessagesUserids,userid)
		scrollToTop(userid)
				
	}

	function updateContactList(xml) {
		// Invoke this function after 10 sec
		// Send ajax request to check who all are online for the current user
		onlineUsers = populateOnlineUsers(xml)//['Yogesh','Mohit', 'Sachin']
		currentOnlineUsers = onlineUsers;
		// Update Online users list
		deleteRowsToOnlineUsersTable()
		addRowsToOnlineUsersTable(onlineUsers)
		createChatArea(onlineUsers)

	}

	function addRowsToOnlineUsersTable(onlineUsers) {
		var onlineUserstbl = document.getElementById('onlineusers');
		var onlineGroupstbl = document.getElementById('onlinegroups');
		for ( var i_tem = 0; i_tem < onlineUsers.length; i_tem++) {

			loginid = trim(onlineUsers[i_tem][0])
			displayName = trim(onlineUsers[i_tem][2])
			status = trim(onlineUsers[i_tem][1])
			image = getImageName(onlineUsers[i_tem][1]);
			imagePath11 = trim(onlineUsers[i_tem][3])
			frndStatus = trim(onlineUsers[i_tem][4])
			isGroup = trim(onlineUsers[i_tem][5])
			groupOwner = trim(onlineUsers[i_tem][6])
			
			if (isGroup=='Y'){
				tbl = onlineGroupstbl
			} else {
				tbl = onlineUserstbl
			}



			var lastRow = tbl.rows.length;
			// if there's no header row in the table, then iteration = lastRow + 1
			var iteration = lastRow;
			var row = tbl.insertRow(lastRow);

			// left cell
			var cellLeftLeft = row.insertCell(0);
			var cellLeft = row.insertCell(1);
			var cellRight = row.insertCell(2);

			
			
			
			cellLeft.id = loginid + '_link'
			cellLeftLeft.id = loginid + '_image'
			cellRight.id = loginid + '_status'

			cellLeftLeft.width="20%"
			cellLeft.width="75%"
			cellRight.width="5%"
			
			//cellLeft.styleclass='indOnlineUser'
			strImage = "<img style='cursor=hand' id='onlineUser_link_"+loginid+"' src='images/"+getSmallImageValue(imagePath11)+"'/>" //"<img src='bakar?blob-key=" + imagePath11 + "&size=SMALL' />&nbsp;&nbsp;"
			if (frndStatus=='APP'){
				strName = "<A HREF='#'  onclick=displayChat('"+ loginid + "')>" + truncateString(displayName, 26) + "</A>"
				strStatus =	"<img id='"+loginid+"_statusImage' src='images/" + image + ".png' />" 
			} else if (frndStatus=='WFM') {
				strName = truncateString(displayName, 10) + ""
				
				strStatus ="<img src='images/yes_s.png' style='cursor=hand' onclick=updateFriendRequest('APPROVE','"+loginid+ "') id='yesbt_"+loginid+"'  />&nbsp;&nbsp;"
				+  "<img src='images/no_s.png' style='cursor=hand' onclick=updateFriendRequest('REJECT','"+loginid+ "') id='nobt_"+loginid+"'  />"
			} else if (frndStatus=='IAW') {
				strName = truncateString(displayName, 10) + ""
				strStatus ="<img src='images/pending_s.png' style='cursor=hand'  id='waitbt_"+loginid+"'  />"
			}

			cellLeft.innerHTML = strName
			cellLeftLeft.innerHTML = strImage
			cellRight.innerHTML = strStatus

			 if (frndStatus=='WFM')	createFriendRequestToolTips(loginid)
			 if (frndStatus=='IAW')	createWaitingFriendRequestToolTips(loginid)
			 if (isGroup == 'Y' ){
				
				 createGroupUsersListToolTips(loginid)
			 }
			 changeOnlineUsersBackgroundUsersUpdate(loginid)
		}

	}
	

	function deleteRowsToOnlineUsersTable() {
		deleteRows('onlineusers',true)
		deleteRows('onlinegroups',true)
	}

	function createChatArea(onlineUsers) {
		for ( var i_tem = 0; i_tem < onlineUsers.length; i_tem++) {
			chatArea = document
					.getElementById(onlineUsers[i_tem][0] + '_chatarea')
			if (chatArea == null) {
				loginid = trim(onlineUsers[i_tem][0])
				displayName = trim(onlineUsers[i_tem][2])
				status = trim(onlineUsers[i_tem][1])

				chatcell = document.getElementById('mainca');
				chatcell.innerHTML = chatcell.innerHTML
						+ "<div class='individualChat' id='"
						+ loginid
						+ "_chatarea' style='display:none'>"
						+ "<div id='"
						+ loginid
						+ "_chathistory'  class=chathistory ></div>"
						+ "<BR><HR>"
						+ "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
						+ "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
						+ "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
						+ "<img src='images/smileys/smiley1.gif' style='cursor=hand' onclick=dijit.byId('smileys').show();populateSmileysTable('"+ loginid+"_chatcurrent') /><br/>"
						+ "&nbsp;&nbsp;<TEXTAREA id='"
						+ loginid
						+ "_chatcurrent' ROWS='3' COLS='48' class=textareaOnblur onfocus=changeStyle(this,'textareaOnfocus') onblur=changeStyle(this,'textareaOnblur')> "
						+ "</TEXTAREA>"
						+ "<BR>"
						+ "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
						+ "<!--<button class='apple-store' onclick=sendMessage('"
						+ loginid + "') >Send</button>-->" +
						//"<img  onclick=sendMessage('"+onlineUsers[i_tem]+"') src='images/wip/CuteCapLa3_new.gif'>"+
						//"<input type=submit value=Send onclick=sendMessage('"+onlineUsers[i_tem]+"') />"+
						"</div>"

			}
		}
	}

	function sendMessage(userid) {

		changeTimeouts(0,'SEND')
		resetSessionTimers()
		if (userid.indexOf("bkrgrp") == -1){
			removeByElement(msgAddedToExisting,(userid+userid))
		} else {
			if(msgAddedToExisting.containsSimilar(userid)){
				if (!msgAddedToExisting.contains(userid+localuser)){
					removeBySimilarElement(msgAddedToExisting,userid)
				}
			}
		}
		message = document.getElementById(userid + "_chatcurrent").value
		createChatHistoryMessage(userid, message, 'Send')
		scrollToTop(userid)
		document.getElementById(userid + "_chatcurrent").value = ""
		// Got all the details to send message
		sendMessageToServer(message, userid)
		
	}

	function receiveMessage(xml) {
		messages = populateMessages(xml)
		changeTimeouts(messages.length,'RECEIVE')
		title =''
		for (var i = 0; i < messages.length; i++) {
			userid = messages[i][0];
			message = messages[i][1];
			ownerid = messages[i][3];
			
			removeByElement(msgAddedToExisting,userid+localuser)
			if(msgAddedToExisting.containsSimilar(userid)){
				if (!msgAddedToExisting.contains(userid+ownerid)){
					removeBySimilarElement(msgAddedToExisting,userid)
				}
			}
			title = getDisplayName(ownerid) + ' says '+ message; // will display only last message at the title bar
			createChatHistoryMessage(userid, message, 'Receive',messages[i][2] ,ownerid)
			changeOnlineUsersBackgroundMessageReceive(userid)
			if (!unreadMessagesUserids.contains(userid) && (selectedLoginId != userid)){
				unreadMessagesUserids.push(userid)
			} 
			scrollToTop(userid)
			//updateMessageTime(userid)
			
		}
		if (messages.length > 0){
			if (titlechageTimeoutId != null){
				document.title ='Bakar'
				clearInterval(titlechageTimeoutId)
				titlechageTimeoutId = null
			}
			titlechageTimeoutId = changeTitle(title)
		}
		// Update timestamp of each message.
		for ( var i_tem = 0; i_tem < onlineUsers.length; i_tem++) {
			loginid = trim(onlineUsers[i_tem][0])
			updateMessageTime(loginid)
		}
		removeMessagesFrmServer()
		
	}

	function createChatHistoryMessage(userid, message, type,messageTime, ownerid) {
		log (userid+" " +message+" " + type+" " +messageTime+" " + ownerid)
		var lastSender
		if (type == 'Send') {
			sender = localuserdisplayname
			thisImagePath = localUserImagePath;
			messageTime = getCurrentTime()
			lastSender=userid+localuser
		} else {
			sender = getDisplayName(ownerid)
			thisImagePath = getImagePath(ownerid)
			lastSender=userid+ownerid
		}
		message = replaceSmiley(message)
		if (msgAddedToExisting.contains(lastSender)){
			document.getElementById('localUserChat_'+messageIds[lastSender]).innerHTML = document.getElementById('localUserChat_'+messageIds[lastSender]).innerHTML+"<br/><img src='images/arrow.png'/>&nbsp;&nbsp;&nbsp;&nbsp;"+message
		} else {
			if (!msgAddedToExisting.contains(lastSender)){
				msgAddedToExisting.push(lastSender)
			}
			messageIds[lastSender] = randomNumber();
			document.getElementById(userid + "_chathistory").innerHTML = document
					.getElementById(userid + "_chathistory").innerHTML
					+ "<table border=0 width=100%><tr><td width=25% valign=top>" 
					+ "<img src='images/"+thisImagePath+"'/>"//"<img src='bakar?blob-key=" + thisImagePath + "&size=MEDIUM' />"
					+ "<br/></td><td  valign=top>"
					+ "<span  class=chathistoryName >"+ sender+" :</span>&nbsp;&nbsp;<span id='localUserChat_"+messageIds[lastSender]+"'>"
					+ message + "</span> </td></tr><tr><td align=center class=chathistoryName> " +" </td><td align=right><span class=chathistoryTime id='displayTime_"+messageIds[lastSender]+"'>"+getMessageTime(messageTime)+ "</span></td></tr>"
					+ "<input  type=hidden name='"+userid+"_messageTime' value='"+messageIds[lastSender]+"#"+messageTime+"'/>"
					+ "<HR>"
		}
	}

	

	function addFriend()
	{
		var newUser = document.getElementById('newUser');
		addType11 = document.getElementById('newUserID')
		additionalMessage11 = document.getElementById('additionalMessage').value;
		if (addType11.value == 'EMAIL'){
			emailIds = newUser.value.split(';');
			if (emailIds.length == 0){
				 alert ('Please enter email id of your friend')
				 return false
			}
			for (i=0; i< emailIds.length;i++){
				if (validateEmail(emailIds[i])){
					alert ("Invalid email id "+ emailIds[i])
					return false;
				}
			}
			
		} else if (trim(newUser.value) == ''){
			alert("Please enter gmail id of your friend")
			return false
		}
		updateUserToServer("&reqType=ADDFRIEND&newUser="+newUser.value+"&addType="+addType11.value+"&additionalMessage="+additionalMessage11)
		document.getElementById('additionalMessage').value = defaultInvitationMessage
	}
	function addImage(newImageValue)
	{
		//var newImagePath = document.getElementById('imagePath');
		//localUserImagePath = newImagePath.value
		updateUserToServer("&reqType=ADDIMAGE&image="+newImageValue)
		dijit.byId('uploadDialog').hide()
		
	}
	function updateFriendRequest(actionTaken, userId){
		updateUserToServer("&reqType=UPDATEFRNDREQ&action="+actionTaken+"&newUser="+userId)
	}
	function updateDisplayName(){
		localuserdisplayname = document.getElementById('newDisplayName').value
		updateUserToServer("&reqType=UPDATEDISPNAME&displayName="+localuserdisplayname)
	}

	function createGroup(){
		var groupLoginIds11 = document.getElementById('groupLoginIds').value
		var groupName11 = document.getElementById('txtGroupName').value
		updateGroupToServer("&reqType=CREATEGROUP&groupName="+groupName11+"&groupLoginIds="+groupLoginIds11)
	}

	function updateGroup(){
		var groupLoginIds11 = document.getElementById('existingUsers').value
		var groupId11 = document.getElementById('groupOwns').value
		alert(groupId11 + " " + groupLoginIds11)
		updateGroupToServer("&reqType=UPDATEGROUP&groupId="+groupId11+"&groupLoginIds="+groupLoginIds11)
	}

	/** this function is called when any message 
		comes to the client if the selected user is not the user
		from the message has come it will change it bkgrnd to different colour
	*/
	function changeOnlineUsersBackgroundMessageReceive(userid){
		if (selectedLoginId != userid){
			chagneUserListBkgrdColour(userid, '#FFF68F')
		}
	}

	/** this function is called when online user list is updated
		it will first update the selected user background
		then it will update all pending users background
	*/
	function changeOnlineUsersBackgroundUsersUpdate(userid){
		if (selectedLoginId == userid){
			chagneUserListBkgrdColour(userid, '#F0F0F0')
		} else if (unreadMessagesUserids.contains(userid)){
			chagneUserListBkgrdColour(userid, '#FFF68F')
		}
		
	}
	/* this is called when any user is selected it will
		first reset the priviously selected user
		then change the background of the newly selected user
	*/
	function changeOnlineUsersBackgroundDisplayChat(userid){
		if (selectedLoginId != null){
			chagneUserListBkgrdColour(selectedLoginId, 'WHITE')
		}
		selectedLoginId = userid
		chagneUserListBkgrdColour(userid, '#F0F0F0')
	}

	function chagneUserListBkgrdColour(userid, colour){
		if (userid != null){
			document.getElementById(userid + "_link").bgColor = colour
			document.getElementById(userid + "_image").bgColor = colour
			document.getElementById(userid + "_status").bgColor = colour
			document.getElementById(userid + "_statusImage").src =  getStatusImagePath(colour, document.getElementById(userid + "_statusImage").src)
		}
	}
	function getStatusImagePath(colour, imagePath){
		if (colour=='WHITE'){
			newSuffix = 'NON'
		} else if (colour=='#F0F0F0'){
			newSuffix = 'CUR'
		} else if (colour=='#FFF68F'){
			newSuffix = 'MSG'
		}
		oldStatus= 	imagePath.substring(imagePath.length-7,imagePath.length-4)
		newImagePath = imagePath.replace(oldStatus,newSuffix)
		return newImagePath
		
	}
	function assignAddType(value){
		document.getElementById('newUserID').value = value
		eleName = value=='EMAIL'?'emailmsg':'usernamemsg'
			otherEleName = value=='EMAIL'?'usernamemsg':'emailmsg'
		document.getElementById(eleName).style.display='block'
			document.getElementById(otherEleName).style.display='none'
	}

	

	
</SCRIPT>



</HEAD>

<BODY onload="" class="Claro" onkeyup="keypressed()"  onunload="changeStatus('D_LOGOUT');doActualLogout();">
<div id="loading"><img src='images/loading.gif' /></div>


<TABLE class=maintable cellpadding=0px  >
	<TR>
		<td class=header colspan=2>Bakar</td>
	</tr>
	<!--  TR>
		<td class=logoutURL colspan=2><a href='<%=googleUserService.createLogoutURL("/")%>'> logout </a></td>
	</tr-->
	<TR>
		<td colspan=2 align=right>logged in user is ${currentUser} <span id=headerDisplayName>(${localuserdisplayname})</span> <span id=status>Available</span> &nbsp&nbsp<a href='#' onclick='doActualLogout()'>logout</a>  </td>
	</TR>	
	<TR>
		<td colspan=2>
		<div dojoType="dijit.MenuBar" id="navMenu">
			<div dojoType="dijit.PopupMenuBarItem"><span id=status>Change Status </span>
				<div dojoType="dijit.Menu" id="fileMenu">
					<div dojoType="dijit.MenuItem" onClick="changeStatus('A_AVAILABLE')">Available</div>
					<div dojoType="dijit.MenuItem" onClick="changeStatus('B_BUSY')">Busy</div>
					<div dojoType="dijit.MenuItem" onClick="changeStatus('C_AWAY')">Away</div>
					<div dojoType="dijit.MenuItem" onClick="changeStatus('D_LOGOUT');window.close()">Logout</div>
				</div>
			</div>
			<div dojoType="dijit.PopupMenuBarItem"><span>Update Profile</span>
				<div dojoType="dijit.Menu" id="fileMenu1">
					<div dojoType="dijit.MenuItem" onClick="dijit.byId('inviteFriend').show(); ">Invite Friends</div>
					<div dojoType="dijit.MenuItem" onClick="dijit.byId('updateDisplayName').show(); ">Change Display Name</div>
					<div dojoType="dijit.MenuItem" onClick="dijit.byId('uploadDialog').show(); ">Change Image</div>
				</div>
			</div>
			<div dojoType="dijit.PopupMenuBarItem"><span>Manage Groups</span>
				<div dojoType="dijit.Menu" id="fileMenu2">
					<div dojoType="dijit.MenuItem" onClick="dijit.byId('createGroup').show();populateNewGroupUsers() ">Create Group</div>
					<div dojoType="dijit.MenuItem" onClick="dijit.byId('updateGroup').show();populateUpdateGroup();">Update Group</div>
				</div>
			</div>
		</div>	
		</td>

	</tr>
	<tr style="height: 450px;">
		<!-- LHS - List of Online Users -->
		<TD valign=top >
			<table class=lhs_main_table>
				
				<tr valign=top>
					<td class="subheader">My Friends</td>
					<td align=right valign=bottom class="subheader"><img id='area_onlineusers_img' style='cursor=hand' src='images/arrow_s_v.png' onclick="toggleDisplay('area_onlineusers','area_onlinegroups','210px')"/></td>
				</tr>
				<tr valign=top>
					<td  colspan=2>
						<div id=area_onlineusers style="width: 100%; height: 210px; overflow: auto;">
							<TABLE id=onlineusers>
							
							</TABLE>
						</div>
					</td>
				</tr>
				<tr valign=top>
					<td class="subheader">My Groups</td>
					<td align=right valign=bottom class="subheader"><img id='area_onlinegroups_img' style='cursor=hand' src='images/arrow_s_h.png' onclick="toggleDisplay('area_onlinegroups','area_onlineusers','210px')"/></td>
				</tr>
				<tr valign=top>
					<td colspan=2>
						<div id=area_onlinegroups style="width: 100%; height: 210px; overflow: auto;display:block">
							<TABLE id=onlinegroups>
							
							</TABLE>
						</div>
					</td>
				</tr>
				
			</table>
		</TD>
		<!-- RHS Current Chat-->
		<TD valign=top id='mainca'></TD>
	</TR>
	
</TABLE>
<div id=footer style="display: block">
	<table >
		<tr>
			<td colspan=3><hr/></td>
		</tr>
		<tr>
		<td align="center" width=70%>&nbsp;</td>
		<td align="right"><a href="#" onclick="window.open('faqs.htm', 'windowname2', 'width=460, height=600, directories=no, location=no, menubar=no, resizable=no, scrollbars=1, status=no, toolbar=no');  return false;">|&nbsp;&nbsp;&nbsp;FAQs&nbsp;&nbsp;&nbsp;|</a></td>
		<td align="right"><a href="#" onclick="window.open('aboutBakar.htm', 'windowname2', 'width=450, height=150, directories=no, location=no, menubar=no, resizable=no, scrollbars=1, status=no, toolbar=no');  return false;">About Bakar&nbsp;&nbsp;&nbsp;|</a></td>
		</tr>
	</table>
	
</div>
<div style="display: none"><input type=button
	value='Update Contact List' onclick=getOnlineUsersFrmServer();;; /> <input
	type=button value='Receive Messsages'
	onclick=receiveMessagesFrmServer();;; />
	
	<input type=text
	name=imagePath id=imagePath /> <input type=button onclick=addImage()
	value="Change Image"> </input> <a
	href="javascript:window.open('uploadImage.jsp?currentUser=${currentUser}')">Upload
Image</a>
	
	
	</div>

<script>
	// updateContactList(); displayChat('yogesh')
</script> 

<div id="uploadDialog" dojoType="dijit.Dialog" title="Change Your Image">

	<div dojoType="dijit.layout.TabContainer" title="foo"
		style="width: 400px; height: 500px;"  doLayout="false">
	
	<%--
		BlobstoreService blobstoreService = BlobstoreServiceFactory
				.getBlobstoreService();
	
	
	<form action="" name="frmIO" id="frmIO"
		method="post" enctype="multipart/form-data">
		Upload Image less than 100KB for better view <br/><br/>
		<input type="file"
		name="myfile"  id=myfile> <br></br><button onclick="uploadImage()"  dojoType="dijit.form.Button" type="submit">Go</button>
	 <input
		type=hidden name=currentUser value='${currentUser}' /> <input
		type=hidden name=reqType value='ADDIMAGE' /></form>
	
	 <input type=hidden id=uploadAction value='<%=blobstoreService.createUploadUrl("/update")%>' />
		<span id=uploadFileStatus></span>
		--%>
		
		 <div dojoType="dijit.layout.ContentPane" title="Hollywood"  >
          	<jsp:include page="hollywood.jsp"></jsp:include>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Cartoons" >
           <jsp:include page="cartoons.jsp"></jsp:include>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Additional Cartoons"  >
            <jsp:include page="cartoons_add.jsp"></jsp:include>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="Bollywood"  >
            <jsp:include page="bollywood.jsp"></jsp:include>
        </div>
        <div dojoType="dijit.layout.ContentPane" title=""  selected="true" >
           
        </div>
		
		
		
		
		
	</div>
</div>


<div id="inviteFriend" dojoType="dijit.Dialog" title="Invite your friends">

	<div dojoType="dijit.layout.ContentPane" title="foo"
		style="width: 450px; height: 280px;">
		 <table border='0px'  bordercolor="red"  cellpadding=3px cellspacing=4px>
		<tr><td align=center>
			How to do you want to invite your friends?
		</td></tr>
		<tr><td align=center>	
			<input CHECKED onclick=assignAddType(this.value) name="rqtyp" type="radio" value="EMAIL">By Email</input>
			<input 		   onclick=assignAddType(this.value) name="rqtyp" type="radio" value="USERNAME">Adding User name</input>
			<input id=newUserID type=hidden name="addType" value="EMAIL"/> 
			<br/>
		</td></tr>
		<tr><td align=center>
			<div id=emailmsg>Send Email invite to your friends. <br/><i> Add mutiple e-mail addresses separated by ";" </i> </div>
			<div id=usernamemsg style="display:none">If you know your friends G-Mail id, you can directly add him/her. <br/><i>Add user ids separated by ";"</i> </div>
		</td></tr>	
		<tr><td  align=center>	
			Email/User ids : <input type=text name=newUser id=newUser /> <br/>
		</td></tr>
		<tr><td align=center>
			Please enter your customize message here. <br/>
			<textarea   id='additionalMessage' cols="40" rows="4">
Hi Friend, 
I would like you to join Bakar.  
Cheers,   
${currentUser}
			  </textarea>
		</td></tr>		  
		<tr><td align=center>		
			<Button	onclick=addFriend() dojoType="dijit.form.Button" > Add friends</button>
		</td></tr>		 
		</table>
	</div>
</div>


<div id="updateDisplayName" dojoType="dijit.Dialog" title="Change Display Name">

	<div dojoType="dijit.layout.ContentPane" title="foo" style="width: 300px; height: 140px;">
			Enter your new display name. <br/>
			<input type=text name=newDisplayName id=newDisplayName  maxlength=20/>
			<Button	onclick="updateDisplayName()" dojoType="dijit.form.Button" > Change Display Name </button> 
		
	</div>
</div>

<div id="smileys" dojoType="dijit.Dialog" title="Insert Smiley">

	<div dojoType="dijit.layout.ContentPane" title="foo" style="width: 450px; height: 250px;">
		<table id=smileyTable border=1>
	
		</table>
		
	</div>
</div>


<div id="createGroup" dojoType="dijit.Dialog" title="Create New Group">

	<div dojoType="dijit.layout.ContentPane" title="foo" style="width: 400px; height: 340px;">
	Group Name :		
			<input type=text name=txtGroupName id=txtGroupName  maxlength=30/> <br/>
			Login Ids for the group :	
			<input type=hidden name=groupLoginIds id=groupLoginIds /> <br/><br/>
			
			<table id="newGroupUsers" border=1 width=100%>
				<thead>
					<tr><td></td><td>User</td><td>Select</td></tr>
				</thead>
				<tbody></tbody>
			</table>
			<Button	onclick="createGroup()" dojoType="dijit.form.Button" > Create New Group </button> 
		
	</div>
</div>

<div id="updateGroup" dojoType="dijit.Dialog" title="Update your groups">

	<div dojoType="dijit.layout.ContentPane" title="foo" style="width: 500px; height: 540px;">
	 	<!-- populate the drop down with list of groups the user owns -->
	 	<select id=groupOwns name=groupOwnsName onchange="populateUpdateGroupUsers(this.value)">
	 	<option>Select Group</option>
	 	</select><br>
	 	
	 	<!-- when user select any group get the list of users under that group -->
	 	Available Users : <input type=text id=availableUsers name=txtAvailableUsers></input><br>
	 	Modified Users : <input type=text id=existingUsers name=txtExistingUsers></input><br>
	 	<table id="updateGroupUsers" border=1 width=100%>
				<thead>
					<tr><td></td><td>User</td><td>Select</td></tr>
				</thead>
				<tbody></tbody>
			</table>
	 	
		<Button	onclick="updateGroup()" dojoType="dijit.form.Button" >Update Group </button> 
	</div>
</div>

</BODY>
<div id=diagnostic></div>
<button onclick="document.getElementById('diagnostic').innerHTML=''">Clear</button>
<button onclick="document.getElementById('area_onlinegroups').style.display='none';document.getElementById('area_onlineusers').style.height='415px'">Hide</button>
<button onclick="document.getElementById('area_onlinegroups').style.display='block';document.getElementById('area_onlineusers').style.height='215px'">Show</button>
<button onclick="document.getElementById('area_onlineusers').style.display='none';document.getElementById('area_onlinegroups').style.height='415px'">Hide Users</button>
<button onclick="document.getElementById('area_onlineusers').style.display='block';document.getElementById('area_onlinegroups').style.height='200px'">Show Users</button>
<br>
<br>
<br>
</HTML>

